import { useSelector, useDispatch } from "react-redux"
import handlePage1 from '@/store/Page1/index'
import { Button } from 'antd'
import { useLocation, useParams } from 'react-router-dom';
import { useEffect } from "react";

function View() {
    // 使用useSelector从 Redux store 中获取状态，获取的是全局的状态，集合到stare中
    // useSelector 会订阅 Redux store，当 store 中的状态发生变化时，组件会重新渲染。
    const { num } = useSelector((state: RootStateType) => state.page1Store)

    const dispatch: AppDispatch = useDispatch()

    const changeNum = () => {
        dispatch({ type: 'addself' })
    }

    const changeNumAdd = () => {
        dispatch(handlePage1.asyncActions.fetchData)
    }

    const location = useLocation()
    const pathParams = useParams()
 
    useEffect(() => {
        console.log('location= ', location)
        console.log('pathParams= ', pathParams)
    }, [])

    return (
        <>
            <div>Page1</div>
            <p>{num}</p>
            <Button type="primary" onClick={changeNum}>changeNum</Button>
            <Button type="primary" onClick={changeNumAdd}>addValue</Button>
        </>
    )
}

export default View